<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>我的文献</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/layer.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/laydate.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/zhiwang.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
</head>
<body>
<!--导航栏-->
<div th:include="unit/main-unit :: nav"></div>
<!--侧边栏：论文/方向列表-->
<div th:replace="unit/slider-bar-table :: slider-bar-table"></div>
<!--文献列表-->
<div th:replace="unit/home-table::list-agreegate">
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/js/my.js}"></script>
<script type="text/javascript" th:src="@{/js/home.js}"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="check">检查</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">
    /*首次加载数据表格*/
    var agreegateId = $('#aggregateId').text();
    loadDocumentList(agreegateId);

    var laydate = layui.laydate //日期
        , layer = layui.layer //弹层
        , table = layui.table //表格
        , element = layui.element; //元素操作

    //监听Tab切换
    element.on('tab(demo)', function (data) {
        layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
            tips: 1
        });
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'check') {
            if (check(data.docContent)) layer.msg('格式正确');
        } else if (layEvent === 'del') {
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    url: '/reference/document/delete',
                    type: 'DELETE',
                    data: {docId: data.id},
                    success: function (result) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);//向服务端发送删除指令
                    }
                });
            });
        } else if (layEvent === 'edit') {
            $('#docContent').val(data.docContent);
            $('#docId').text(data.id);
        }
    });
</script>
</body>
</html>